<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script>
    var gaProperty = 'UA-2577926-1';
    // Disable tracking if the opt-out cookie exists.
    var disableStr = 'ga-disable-' + gaProperty;
    if (document.cookie.indexOf(disableStr + '=true') > -1) {
      window[disableStr] = true;
    }
    function gaOptout() {
      document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = true;
    }
    function gaOptoutRevoke() {
      document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
      window[disableStr] = false;
    }
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
    </script>
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
    <script>
    window.addEventListener("load", function() {
      window.cookieconsent.initialise({
        'palette': {
          'popup': {
            'background': '#eaf7f7',
            'text': '#5c7291'
          },
          'button': {
            'background': '#56cbdb',
            'text': '#ffffff'
          }
        },
        'theme': 'edgeless',
        'type': 'opt-out',
        'onInitialise': function (status) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onStatusChange': function(status, chosenBefore) {
          if (!this.hasConsented()) {
            gaOptout()
          }
        },
        'onRevokeChoice': function() {
          gaOptoutRevoke()
        }
      })
    });
    </script>
    <title>OpenLayers v6.13.0 API - Module: ol/style/expressions</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/bootstrap.bundle.min.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
    <link type="text/css" rel="stylesheet" href="styles/site.css">
  </head>
  <body>
    <div class="container-fluid">
      <header class="navbar navbar-expand-sm navbar-dark mb-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="https://openlayers.org/"><img src="logo-70x70.png" alt="">&nbsp;OpenLayers</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
          <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="docdropdown">
              <a class="dropdown-item" href="/en/latest/doc/">Docs</a>
              <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
                <a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
                <a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
                <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
            </div>
          </li>
          <li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li>
          <li class="nav-item active"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="codedropdown">
              <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
              <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
            </div>
           </li>
          </ul>
        </nav>
      </header>
      <div id="wrap" class="row">
        <div class="navigation col-md-4 col-lg-3">
          <div class="search-wrapper">
            <div class="search">
              <input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
            </div>
          </div>
          <div class="navigation-list-wrapper">
            <ul class="navigation-list search-empty">
<li class="item item-module toggle-manual toggle-manual-show" data-longname="module:ol/style/expressions" data-name="ol/style/expressions">
    <span class="title toggle">
        <span class="fa fa-plus mr-2 mt-1"></span>
        <span><a href="module-ol_style_expressions.html">ol​/style​/expressions</a></span>
    </span>
    <div class="member-list" data-type="members">
        <span class="subtitle">Members</span>
        <ul>
            <li data-name="valuetypes"><a href="module-ol_style_expressions.html#.ValueTypes">ValueTypes</a>
        </ul>
    </div>
    <div class="member-list" data-type="typedefs">
        <span class="subtitle">Typedefs</span>
        <ul>
            <li data-name="expressionvalue"><a href="module-ol_style_expressions.html#~ExpressionValue">ExpressionValue</a>
            <li data-name="operator"><a href="module-ol_style_expressions.html#~Operator">Operator</a>
            <li data-name="parsingcontext"><a href="module-ol_style_expressions.html#~ParsingContext">ParsingContext</a>
        </ul>
    </div>
              <li class="loading">Loading …
            </ul>
          </div>
        </div>

        <div class="main col-md-8 col-lg-9">
            <h1 class="page-title" data-filename="module-ol_style_expressions.html">Module: ol/style/expressions</h1>
            <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
              <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              This documentation is for OpenLayers v<span id="package-version">6.13.0</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
            </div>
            



<section class="content">

<header>
    <h2 class="my-3">ol/style/expressions
    </h2>
    <br>
    
      
      
    
    <div class="row p-3 ">
      <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
        <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg" id="_carbonads_js"></script>
      </div>
    
    </div>
</header>

<article>
    <div class="container-overview">
    

    
        
            <div class="description"><p>Operators and utilities used for style expressions</p></div>
        

        
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


        
    
    </div>

    

    

    

    

    

    

    

    
        <h3 class="subsection-title">Members</h3>

        <dl>
            
<dt class="">
    <div class="nameContainer">
        <div class="anchor" id=".ValueTypes">
        </div>
        <h4 class="name">
            module:ol/style/expressions.ValueTypes<span class="type-signature type number">{number}</span> 
            

        </h4>
    </div>
    
</dt>
<dd class="">
    
    <div class="description">
        <p>Possible inferred types from a given value or expression.
Note: these are binary flags.</p>
    </div>
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    
</dd>

        </dl>
    

    

    
        <h3 class="subsection-title">Type Definitions</h3>

        <dl>
                
<dt class="">
    <div class="nameContainer">
        <div class="anchor" id="~ExpressionValue">
        </div>
        <h4 class="name">
            ExpressionValue<span class="type-signature type array.<*>">{Array.&lt;*>}</span> <span class="type-signature type module:ol/color~color">{<a href="module-ol_color.html#~Color">module:ol/color~Color</a>}</span> <span class="type-signature type string">{string}</span> <span class="type-signature type number">{number}</span> <span class="type-signature type boolean">{boolean}</span> 
            

        </h4>
    </div>
    
</dt>
<dd class="">
    
    <div class="description">
        <p>Base type used for literal style parameters; can be a number literal or the output of an operator,
which in turns takes <a href="module-ol_style_expressions.html#~ExpressionValue"><code>module:ol/style/expressions~ExpressionValue</code></a> arguments.</p>
<p>The following operators can be used:</p>
<ul>
<li><p>Reading operators:</p>
<ul>
<li><code>['band', bandIndex, xOffset, yOffset]</code> For tile layers only. Fetches pixel values from band
<code>bandIndex</code> of the source's data. The first <code>bandIndex</code> of the source data is <code>1</code>. Fetched values
are in the 0..1 range. <a href="module-ol_source_TileImage-TileImage.html"><code>module:ol/source/TileImage~TileImage</code></a> sources have 4 bands: red,
green, blue and alpha. <a href="module-ol_source_DataTile-DataTileSource.html"><code>module:ol/source/DataTile~DataTileSource</code></a> sources can have any number
of bands, depending on the underlying data source and
<a href="module-ol_source_GeoTIFF.html#~Options"><code>configuration</code></a>. <code>xOffset</code> and <code>yOffset</code> are optional
and allow specifying pixel offsets for x and y. This is used for sampling data from neighboring pixels.</li>
<li><code>['get', 'attributeName']</code> fetches a feature attribute (it will be prefixed by <code>a_</code> in the shader)
Note: those will be taken from the attributes provided to the renderer</li>
<li><code>['resolution']</code> returns the current resolution</li>
<li><code>['time']</code> returns the time in seconds since the creation of the layer</li>
<li><code>['var', 'varName']</code> fetches a value from the style variables, or 0 if undefined</li>
<li><code>['zoom']</code> returns the current zoom level</li>
</ul>
</li>
<li><p>Math operators:</p>
<ul>
<li><code>['*', value1, value2]</code> multiplies <code>value1</code> by <code>value2</code></li>
<li><code>['/', value1, value2]</code> divides <code>value1</code> by <code>value2</code></li>
<li><code>['+', value1, value2]</code> adds <code>value1</code> and <code>value2</code></li>
<li><code>['-', value1, value2]</code> subtracts <code>value2</code> from <code>value1</code></li>
<li><code>['clamp', value, low, high]</code> clamps <code>value</code> between <code>low</code> and <code>high</code></li>
<li><code>['%', value1, value2]</code> returns the result of <code>value1 % value2</code> (modulo)</li>
<li><code>['^', value1, value2]</code> returns the value of <code>value1</code> raised to the <code>value2</code> power</li>
<li><code>['abs', value1]</code> returns the absolute value of <code>value1</code></li>
<li><code>['floor', value1]</code> returns the nearest integer less than or equal to <code>value1</code></li>
<li><code>['round', value1]</code> returns the nearest integer to <code>value1</code></li>
<li><code>['ceil', value1]</code> returns the nearest integer greater than or equal to <code>value1</code></li>
<li><code>['sin', value1]</code> returns the sine of <code>value1</code></li>
<li><code>['cos', value1]</code> returns the cosine of <code>value1</code></li>
<li><code>['atan', value1, value2]</code> returns <code>atan2(value1, value2)</code>. If <code>value2</code> is not provided, returns <code>atan(value1)</code></li>
</ul>
</li>
<li><p>Transform operators:</p>
<ul>
<li><code>['case', condition1, output1, ...conditionN, outputN, fallback]</code> selects the first output whose corresponding
condition evaluates to <code>true</code>. If no match is found, returns the <code>fallback</code> value.
All conditions should be <code>boolean</code>, output and fallback can be any kind.</li>
<li><code>['match', input, match1, output1, ...matchN, outputN, fallback]</code> compares the <code>input</code> value against all
provided <code>matchX</code> values, returning the output associated with the first valid match. If no match is found,
returns the <code>fallback</code> value.
<code>input</code> and <code>matchX</code> values must all be of the same type, and can be <code>number</code> or <code>string</code>. <code>outputX</code> and
<code>fallback</code> values must be of the same type, and can be of any kind.</li>
<li><code>['interpolate', interpolation, input, stop1, output1, ...stopN, outputN]</code> returns a value by interpolating between
pairs of inputs and outputs; <code>interpolation</code> can either be <code>['linear']</code> or <code>['exponential', base]</code> where <code>base</code> is
the rate of increase from stop A to stop B (i.e. power to which the interpolation ratio is raised); a value
of 1 is equivalent to <code>['linear']</code>.
<code>input</code> and <code>stopX</code> values must all be of type <code>number</code>. <code>outputX</code> values can be <code>number</code> or <code>color</code> values.
Note: <code>input</code> will be clamped between <code>stop1</code> and <code>stopN</code>, meaning that all output values will be comprised
between <code>output1</code> and <code>outputN</code>.</li>
</ul>
</li>
<li><p>Logical operators:</p>
<ul>
<li><code>['&lt;', value1, value2]</code> returns <code>true</code> if <code>value1</code> is strictly lower than <code>value2</code>, or <code>false</code> otherwise.</li>
<li><code>['&lt;=', value1, value2]</code> returns <code>true</code> if <code>value1</code> is lower than or equals <code>value2</code>, or <code>false</code> otherwise.</li>
<li><code>['&gt;', value1, value2]</code> returns <code>true</code> if <code>value1</code> is strictly greater than <code>value2</code>, or <code>false</code> otherwise.</li>
<li><code>['&gt;=', value1, value2]</code> returns <code>true</code> if <code>value1</code> is greater than or equals <code>value2</code>, or <code>false</code> otherwise.</li>
<li><code>['==', value1, value2]</code> returns <code>true</code> if <code>value1</code> equals <code>value2</code>, or <code>false</code> otherwise.</li>
<li><code>['!=', value1, value2]</code> returns <code>true</code> if <code>value1</code> does not equal <code>value2</code>, or <code>false</code> otherwise.</li>
<li><code>['!', value1]</code> returns <code>false</code> if <code>value1</code> is <code>true</code> or greater than <code>0</code>, or <code>true</code> otherwise.</li>
<li><code>['all', value1, value2, ...]</code> returns <code>true</code> if all the inputs are <code>true</code>, <code>false</code> otherwise.</li>
<li><code>['any', value1, value2, ...]</code> returns <code>true</code> if any of the inputs are <code>true</code>, <code>false</code> otherwise.</li>
<li><code>['between', value1, value2, value3]</code> returns <code>true</code> if <code>value1</code> is contained between <code>value2</code> and <code>value3</code>
(inclusively), or <code>false</code> otherwise.</li>
</ul>
</li>
<li><p>Conversion operators:</p>
<ul>
<li><code>['array', value1, ...valueN]</code> creates a numerical array from <code>number</code> values; please note that the amount of
values can currently only be 2, 3 or 4.</li>
<li><code>['color', red, green, blue, alpha]</code> creates a <code>color</code> value from <code>number</code> values; the <code>alpha</code> parameter is
optional; if not specified, it will be set to 1.
Note: <code>red</code>, <code>green</code> and <code>blue</code> components must be values between 0 and 255; <code>alpha</code> between 0 and 1.</li>
<li><code>['palette', index, colors]</code> picks a <code>color</code> value from an array of colors using the given index; the <code>index</code>
expression must evaluate to a number; the items in the <code>colors</code> array must be strings with hex colors
(e.g. <code>'#86A136'</code>), colors using the rgba[a] functional notation (e.g. <code>'rgb(134, 161, 54)'</code> or <code>'rgba(134, 161, 54, 1)'</code>),
named colors (e.g. <code>'red'</code>), or array literals with 3 ([r, g, b]) or 4 ([r, g, b, a]) values (with r, g, and b
in the 0-255 range and a in the 0-1 range).</li>
</ul>
</li>
</ul>
<p>Values can either be literals or another operator, as they will be evaluated recursively.
Literal values can be of the following types:</p>
<ul>
<li><code>boolean</code></li>
<li><code>number</code></li>
<li><code>string</code></li>
<li><a href="module-ol_color.html#~Color"><code>module:ol/color~Color</code></a></li>
</ul>
    </div>
    

    
<dl class="details">
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    
</dd>

            
                
<dt class="">
    <div class="nameContainer">
        <div class="anchor" id="~Operator">
        </div>
        <h4 class="name">
            Operator<span class="type-signature type object">{Object}</span> 
            

        </h4>
    </div>
    
</dt>
<dd class="">
    
    <div class="description">
        <p>An operator declaration must contain two methods: <code>getReturnType</code> which returns a type based on
the operator arguments, and <code>toGlsl</code> which returns a GLSL-compatible string.
Note: both methods can process arguments recursively.</p>
    </div>
    

    
<dl class="details">
    
        
        <h5 class="subsection-title">Properties:</h5>
        
        <dl>

<table class="props">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		
		
		
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr>
            
                <td class="name"><code>getReturnType</code></td>
            
            
            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>
            
            
            
            
            
            <td class="description last"><p>Returns one or several types</p></td>
        </tr>
	
	
	
        <tr>
            
                <td class="name"><code>toGlsl</code></td>
            
            
            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>
            
            
            
            
            
            <td class="description last"><p>Returns a GLSL-compatible string
Note: takes in an optional type hint as 3rd parameter</p></td>
        </tr>
	
	
	</tbody>
</table></dl>
        
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    
</dd>

            
                
<dt class="">
    <div class="nameContainer">
        <div class="anchor" id="~ParsingContext">
        </div>
        <h4 class="name">
            ParsingContext<span class="type-signature type object">{Object}</span> 
            

        </h4>
    </div>
    
</dt>
<dd class="">
    
    <div class="description">
        <p>Context available during the parsing of an expression.</p>
    </div>
    

    
<dl class="details">
    
        
        <h5 class="subsection-title">Properties:</h5>
        
        <dl>

<table class="props">
    <thead>
	<tr>
		
		<th>Name</th>
		
		
		<th>Type</th>
		
		
		<th>Argument</th>
		
		
		
		
		<th class="last">Description</th>
	</tr>
	</thead>
	
	<tbody>
	
	
        <tr>
            
                <td class="name"><code>inFragmentShader</code></td>
            
            
            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>
            
            
                <td class="attributes">
                
                    &lt;optional><br>
                
                    
                
                </td>
            
            
            
            
            <td class="description last"><p>If false, means the expression output should be made for a vertex shader</p></td>
        </tr>
	
	
	
        <tr>
            
                <td class="name"><code>variables</code></td>
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;string></span>


            
            </td>
            
            
                <td class="attributes">
                
                    
                
                </td>
            
            
            
            
            <td class="description last"><p>List of variables used in the expression; contains <strong>unprefixed names</strong></p></td>
        </tr>
	
	
	
        <tr>
            
                <td class="name"><code>attributes</code></td>
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;string></span>


            
            </td>
            
            
                <td class="attributes">
                
                    
                
                </td>
            
            
            
            
            <td class="description last"><p>List of attributes used in the expression; contains <strong>unprefixed names</strong></p></td>
        </tr>
	
	
	
        <tr>
            
                <td class="name"><code>stringLiteralsMap</code></td>
            
            
            <td class="type">
            
                
<span class="param-type">Object.&lt;string, number></span>


            
            </td>
            
            
                <td class="attributes">
                
                    
                
                </td>
            
            
            
            
            <td class="description last"><p>This object maps all encountered string values to a number</p></td>
        </tr>
	
	
	
        <tr>
            
                <td class="name"><code>functions</code></td>
            
            
            <td class="type">
            
                
<span class="param-type">Object.&lt;string, string></span>


            
            </td>
            
            
                <td class="attributes">
                
                    
                
                </td>
            
            
            
            
            <td class="description last"><p>Lookup of functions used by the style.</p></td>
        </tr>
	
	
	
        <tr>
            
                <td class="name"><code>bandCount</code></td>
            
            
            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>
            
            
                <td class="attributes">
                
                    &lt;optional><br>
                
                    
                
                </td>
            
            
            
            
            <td class="description last"><p>Number of bands per pixel.</p></td>
        </tr>
	
	
	
        <tr>
            
                <td class="name"><code>paletteTextures</code></td>
            
            
            <td class="type">
            
                
<span class="param-type">Array.&lt;module:ol/webgl/PaletteTexture~PaletteTexture></span>


            
            </td>
            
            
                <td class="attributes">
                
                    &lt;optional><br>
                
                    
                
                </td>
            
            
            
            
            <td class="description last"><p>List of palettes used by the style.</p></td>
        </tr>
	
	
	</tbody>
</table></dl>
        
    
        
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
</dl>


    
</dd>

            </dl>
    

    
</article>

</section>




        </div>
      </div>
      <script>prettyPrint();</script>
      <script src="scripts/linenumber.js"></script>
      <script src="scripts/main.js"></script>
    </div>
  </body>
</html>